<template>
  <div>
    <div>
        <ul class="p">
            <li class="item" v-for="(item, index) in todos" :key="item" @click="print(index)">
                <div>
                    <span v-bind:class="{ addClass: item.done }"
                    >{{index+1}}{{ item.title }}</span>
                </div>
            </li>
        </ul>
        <p>自定义事件：</p>
    <input
      type="text"
      v-model="text"
      placeholder="按回车确定"
      @keyup.enter="add"
    />
    </div>
  </div>
</template>

<script>

export default {
  name: "HomeNews",
  data() {
    return {
      text: "",
    //   title:'0909',
      todos: [
        {
          title: "吃饭",
          done: false,
        },
        {
          title: "睡觉",
          done: false,
        },
        {
          title: "学Vue",
          done: false,
        },
      ],
    };
  },
  methods: {
    add() {
      this.todos.push({
        title: this.text,
        done: false,
      });
      this.text = "";
    },
    print(index) {
        console.log('this.title')
        console.log(index)
        console.log(this.todos[index].title)
        // return this.$route.params.title
        this.$router.push('/home/user/'+this.todos[index].title)
        return this.$route.params.title
    }
  },
}
</script>

<style scoped>
#app {
  width: 500px;
  margin: 0 auto;
}

li {
  list-style-type: none;
  height: 30px;
  display: flex;
  justify-content: space-between;
}

.p {
  position: relative;
  width: 100%;
  padding: 0;
}

.item {
  background-color: rgb(211, 243, 248);
}

.item:hover {
  background-color: rgba(246, 178, 122, 0.294);
}
</style>